<template>
<div>
    <input ref="id" v-model="id" hidden>
    <input ref="character" v-model="character[0]" hidden>
    <el-row>
      <el-col :span="16" id="myPdf">
        <div class="main-div" >
          <!--  顶部图片  -->
          <img src="@/assets/headBack.png" style="width: 100%;margin-bottom: -40px">
          <div style="background-color:#fcf4ed;border-radius:40px 40px 0 0;position: relative;z-index: 2;padding: 40px 20px 20px 20px;color: #41464B">
            <h1 style="text-align:center;line-height: 60px;font-size: 30px;font-weight: 600;color: #7a2114;">测评报告预览</h1>
            <div style="background: rgba(87,144,255,.2);padding: 20px;text-align: center;margin-bottom: 20px">
              <p style="font-size: 30px;color: #41464B;">您的性格是{{ mbtl }}性格</p>
              <!-- <p style="font-size: 20px;color: #41464B;margin: 20px" v-text="character[1]"></p>
              <p style="font-size: 20px;color: #41464B;margin: 20px" v-text="character[2]"></p>
              <p style="font-size: 20px;color: #41464B;margin: 20px" v-text="character[3]"></p>
              <p style="font-size: 20px;color: #41464B;margin: 20px" v-text="character[4]"></p> -->
            </div>
            <div
              class="HelloWorld echart-box"
              id="myChart1"
              :style="{width: '470px', height: '350px',background:'#ffffff'}">
          </div>
            <div style="background: rgba(87,144,255,.2);padding: 20px;margin-top: 20px;text-align: center">
              <p style="font-size: 30px">【性格分析】</p>
              <p style="font-size: 15px;font-weight: bold;margin: 5px">{{ analy }}</p>
              <!-- <p style="font-size: 15px;font-weight: bold;margin: 5px">作为个体</p>
              <p style="text-align: center" v-text="character[0]"></p>
              <p style="font-size: 15px;font-weight: bold;margin: 5px">沟通特点</p>
              <p style="text-align: center" v-text="character[1]"></p>
              <p style="font-size: 15px;font-weight: bold;margin: 5px">作为朋友</p>
              <p style="text-align: center" v-text="character[2]"></p>
              <p style="font-size: 15px;font-weight: bold;margin: 5px">对待工作和事业</p>
              <p style="text-align: center" v-text="character[3]"></p> -->
            </div>
            <div style="background: white;padding: 20px;margin-top: 20px; text-align: center">
              <p style="font-size: 30px">【职位推荐】</p>
              <p style="font-size: 15px;font-weight: bold;margin: 5px">{{ recommend }}</p>
              <!-- <p style="font-size: 30px">【性格过当】</p>
              <p style="font-size: 15px;font-weight: bold;margin: 5px">作为个体</p>
              <p style="text-align: center" v-text="character[4]"></p>
              <p style="font-size: 15px;font-weight: bold;margin: 5px">沟通特点</p>
              <p style="text-align: center" v-text="character[5]"></p>
              <p style="font-size: 15px;font-weight: bold;margin: 5px">作为朋友</p>
              <p style="text-align: center" v-text="character[6]"></p>
              <p style="font-size: 15px;font-weight: bold;margin: 5px">对待工作和事业</p>
              <p style="text-align: center" v-text="character[7]"></p> -->
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="div-btn">
          <p style="color: #333;font-size:18px;margin-bottom: 20px">获得测试报告</p>
          <!-- 下载word -->
          <!-- <div style="width:100px;height:120px;padding:20px 10px;border: 2px solid #d3d3d3;border-radius: 10px;display: inline-block;margin-right: 10px">
            <p style="color:#41464b;font-size: 15px;">下载word格式</p>
            <p style="color:#41464b;font-size: 15px;margin-bottom: 10px">测试报告</p>
            <p style="color:#41464b;font-size: 15px;margin-bottom: 15px">请您稍等</p>
            <el-button id="down_word_btn" type="primary" @click="saveAsWord">下载</el-button>
          </div> -->
          <!-- 下载pdf -->
          <div style="width:100px;height:120px;padding:20px 10px;border: 2px solid #d3d3d3;border-radius: 10px;display: inline-block">
            <p style="color:#41464b;font-size: 15px;">下载pdf格式</p>
            <p style="color:#41464b;font-size: 15px;margin-bottom: 10px">测试报告</p>
            <p style="color:#41464b;font-size: 15px;margin-bottom: 15px">快速生成</p>
            <el-button id="down_pdf_btn" type="primary" @click="saveAsPDF">下载</el-button>
          </div>
          <!-- 发送邮件 -->
          <!-- <div style="padding:20px 10px;border: 2px solid #d3d3d3;border-radius: 10px;margin-top: 20px">
            <p style="color:#41464b;font-size: 15px;">输入邮箱号码</p>
            <p style="color:#41464b;font-size: 15px;margin-bottom: 20px;">可发送测试结果</p>
            <el-input v-model="email" type="email" placeholder="请输入邮箱" autocomplete="off"></el-input>
            <el-button id="mail_btn" type="primary" @click="sendEmail" style="margin-top: 10px">立即发送</el-button>
          </div> -->
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { formatSeconds } from '@/utils'
import { mapGetters, mapState } from 'vuex'
// import html2canvas from 'html2canvas'
// import JsPDF from 'jspdf'
// import htmlDocx from 'html-docx-js'
// import pdfs from 'html-pdf'
// import Docxtemplater from 'docxtemplater'
// import fs from 'fs'
// import QuestionAnswerShow from '../components/QuestionAnswerShow'
import taskApi from '@/api/examPaperAnswer'
import html2pdf from 'html2pdf.js'
export default {
  // components: { QuestionAnswerShow },
  data () {
    return {
      form: {},
      datas: [],
      legendData: [],
      formLoading: false,
      colorData: [],
      colorDataFm: ['#cd5c5c', '#6495ed', '#ffff00', '#32cd32'],
      answer: {
        id: null,
        score: 0,
        doTime: 0,
        answerItems: [],
        doRight: false
      },
      id: '',
      taskName: '',
      character: [],
      mbtl: "",
      analy:"",
      recommend:"",
      email: '',
      wordBean: {
        id: '',
        character: '',
        img: ''
      },
      resultListJson: ''
    }
  },
  created () {
    let id = this.$route.query.id
    let _this = this
    if (id && parseInt(id) !== 0) {
      _this.formLoading = true
      taskApi.read(id).then(re => {

        _this.character = re.response.character
        _this.mbtl = re.response.mbtl
        _this.analy = re.response.analy
        _this.recommend = re.response.recommend
        _this.id = re.response.id
        for (var i = 0; i < re.response.list.length; i++) {
          if (re.response.list[i].value !== 0) {
            _this.datas.push(re.response.list[i])
            _this.legendData.push(re.response.list[i].name)
          }
        }
        if (re.response.list.every((element) => element.value !== 0)) {
          _this.colorData = ['#cd5c5c', '#6495ed', '#ffff00', '#32cd32']
        } else {
          for (var j = 0; j < re.response.list.length; j++) {
            if (re.response.list[j].value !== 0) {
              _this.colorData.push(_this.colorDataFm[j])
            }
          }
        }
        this.taskName = re.response.taskName
        this.drawLine(re.response.taskName)
      })
    }
  },
  watch: {
    datas: {
      handler: function () {
        this.drawLine()
      },
      deep: true
    }
  },
  methods: {
    drawLine (taskName) {
      // 1、基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart1'))
      // 2、构造图表数据
      let options = {
        title: {
          text: taskName,
          left: 'center'
        },
        color: this.colorData,
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: this.legendData
        },
        series: [
          {
            name: '性格色彩',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.datas,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      // 3、绘制图表
      myChart.setOption(options)
    },
    formatSeconds (theTime) {
      return formatSeconds(theTime)
    },
    questionDoRightTag (status) {
      return this.enumFormat(this.doRightTag, status)
    },
    goAnchor (selector) {
      this.$el.querySelector(selector).scrollIntoView({ behavior: 'instant', block: 'center', inline: 'nearest' })
    },
    saveAsPDF () {
      const element = document.getElementById('myPdf')
      const options = {
        margin: [0, 0, 0, -60],
        filename: this.id + '我的性格测试报告.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2
        },
        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
      }

      html2pdf().set(options).from(element).save()
    },
    // saveAsWord () {
    //   // 获取需要保存为Word的HTML内容
    //   const element = document.getElementById('myPdf')
    //   const htmlContent = element.innerHTML

    //   // 将HTML内容转换为Word文档
    //   const doc = new Docxtemplater();
    //   doc.loadZip(new JSZip(fs.readFileSync('template.docx', 'binary')))
    //   doc.setData({ content: htmlContent })
    //   doc.render();

    //   // 生成填充后的Word文档
    //   const output = doc.getZip().generate({ type: 'nodebuffer' })

    //   // 保存Word文档
    //   fs.writeFileSync('评测报告.docx', output);
    // },
    sendEmail () {
      const element = document.getElementById('myPdf')
      // 创建一个 FormData 对象
      const formData = new FormData()
      const options = {
        margin: [0, 0, 0, -60],
        filename: this.id + '我的性格测试报告.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2
        },
        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
      }
      html2pdf()
        .set(options)
        .from(element)
        .toPdf()
        .get('pdf')
        .then((pdfData) => {
          const file = new Blob([pdfData], { type: 'application/pdf' })
          console.log(pdfData)
          formData.append('pdfFile', file)
          formData.append('email', this.email)
          formData.append('taskName', this.taskName)
          taskApi.sendEmails(formData).then(re => {
            if (re.code === 1) {
              this.$message.success(re.response.message)
            } else {
              this.$message.error(re.response.message)
            }
          })
        })
    }
  },
  computed: {
    ...mapGetters('enumItem', ['enumFormat']),
    ...mapState('enumItem', {
      doRightTag: state => state.exam.question.answer.doRightTag
    })
  }
}
</script>

<style lang="scss" scoped>
  .align-center {
    text-align: center
  }

  .exam-question-item{
    padding: 10px;
    .el-form-item__label{
      font-size: 15px !important;
    }
  }

  .question-title-padding{
    padding-left: 25px;
    padding-right: 25px;
  }
  .main-div{
            width: 550px;
            float: right;
        }
        .main-picture{
            width: 470px;height: 350px;margin: 0 auto;background-color: white;padding: 20px 20px 0px 20px
        }

        .div-btn{
            width:300px;
            height: 700px;
            position:fixed;
            left:70%;
            top:0px;
            z-index: 2;
            margin: 20px;
            padding: 15px;
            text-align: center;
            border: 2px solid #d3d3d3;
            border-radius: 10px;
        }
        @media screen and (max-device-width: 1000px) {
            .main-div{
                width: 100%;
            }
            .main-picture{
                width: 85%;
            }
            .div-btn{
                position: relative;
                width: 100%;
                height: 500px;
                bottom: 0;
                left: 0;
                right: 0;
                margin: 0;
                top: initial;
                border: none;
            }
        }
</style>
